<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采购申请列表</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
<div id="app">
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                type="index"
                label="序号"
                width="50">
        </el-table-column>
        <el-table-column
                label="订单编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="订单类型"
        >
            <template slot-scope="scope">
                <span >{{scope.row.applicationType}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品类型"
        >
            <template slot-scope="scope">
                <span >{{scope.row.productName}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.productNumber}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="需求数量"
        >
            <template slot-scope="scope">
                <span >{{scope.row.demandQuantity}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="产品颜色"
        >
            <template slot-scope="scope">
                <span >{{scope.row.productColor}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="需求部门"
        >
            <template slot-scope="scope">
                <span >{{scope.row.demandDepartment}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="付款方式"
        >
            <template slot-scope="scope">
                <span >{{scope.row.paymentMethod}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="交易时间"
        >
            <template slot-scope="scope">
                <span >{{scope.row.transactionTime}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="审批人"
        >
            <template slot-scope="scope">
                <span >{{scope.row.approver}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="状态"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.applicationStatus==1">已审核</span>
                <span v-if="scope.row.applicationStatus==2">未审核</span>
                <span v-if="scope.row.applicationStatus==3">已驳回</span>
                <span v-if="scope.row.applicationStatus==4">已下单</span>
                <span v-if="scope.row.applicationStatus==5">未下单</span>
            </template>
        </el-table-column>
    </el-table>
    <!--分页按钮-->
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                tableData:null,
                line:null,
                total:0,
                current:1,
                pageSize:10,
                formLabelWidth:"120px",
            }
        },
        methods:{
            loadPage(current)
            {
                this.current = current;
                axios.get("/applyList/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                    }
                });
            },
        },
        mounted(){
            this.loadPage(1);
        }
    })
</script>
</html>